<template>
  <HDropdown v-model:show="show">
    <renderSearchItems/>
  </HDropdown>
</template>
<script setup>
import {computed, h, provide, ref, shallowRef} from 'vue';
import HDropdown from '@comp/HDropdown/HDropdown.vue';
import {closePopup, createProps, getFieldConfigById} from '@/utils';
import FieldSearchRegistry from '@comp/FormEngine/field/FieldSearchRegistry';
import HDropdownItem from '@comp/HDropdown/HDropdownItem.vue';
import ManualRelationInnerSearch from '@comp/FormEngine/field/relation/RelationFormList/ManualRelationInnerSearch.vue';

defineOptions({name: 'ManualRelationSearch'});

const emits = defineEmits(['search'])
const props = defineProps({
  context: createProps(Object, () => undefined),
  formDefinition: createProps(Object, () => undefined),
  manualConfig: createProps(Object, () => undefined),
});
const maxShowSearchFields = shallowRef(2);
const show = shallowRef();
const searchFieldRefs = shallowRef([]);
provide('searchFieldRefs', searchFieldRefs)

const renderSearchFields = computed(() => {
  return props.manualConfig?.manual?.fieldSearches.map(f => {
    let fieldId = f.fieldId;
    let fieldConfig = getFieldConfigById(fieldId, props.formDefinition);
    if (!fieldConfig || !FieldSearchRegistry[fieldConfig.component]) return undefined;
    return {
      ...fieldConfig,
      label: f.label || fieldConfig.label
    };
  }).filter(f => !!f);
});

function renderSearchItems() {
  searchFieldRefs.value = [];
  let res = [];
  for (let i = 0; i < maxShowSearchFields.value; i++) {
    if (needRenderIndex(i + 1)) {
      res.push(renderIndex(i + 1));
    }
  }

  if (hasMoreSearchField()) {
    res.push(renderMoreSearchField());
  }

  return res;
}

function hasMoreSearchField() {
  return needRenderIndex(maxShowSearchFields.value + 1);
}

function renderMoreSearchField() {
  let fields = renderSearchFields.value;
  let renderFields = [];
  for (let i = maxShowSearchFields.value; i < fields.length; i++) {
    renderFields.push(fields[i]);
  }
  return h(HDropdownItem, {
    title: '更多',
    value: `more`,
  }, {
    default: () => h(ManualRelationInnerSearch, {
      renderFields,
      onOk: () => handleOK()
    }),
  });
}

function handleOK() {
  closePopup();
  emits('search')
}

function getParams() {
  let params = []
  searchFieldRefs.value.forEach(searchField => {
    searchField.getParams(params)
  })
  return params;
}

function renderIndex(index) {
  let fields = renderSearchFields.value;
  let field = fields[index - 1];
  return h(HDropdownItem, {
    title: field.label,
    value: `item-${index}`,
  }, {
    default: () => h(ManualRelationInnerSearch, {
      renderFields: [field],
      onOk: () => handleOK()
    }),
  });
}

function needRenderIndex(index) {
  let fields = renderSearchFields.value;
  if (fields && fields.length >= index) {
    return true;
  }
  return false;
}

defineExpose({
  getParams,
})
</script>
<style lang="less">
#manual-relation-form-list-body .van-dropdown-item__content {
  max-height: 100% !important;
}
</style>